<!--
 * @Date: 2022-06-30 14:08:19
 * @LastEditTime: 2022-07-14 07:44:22
-->

<template>
  <div id="rk-main">
    <div id="textrank-name">
      <li class="textrank-choice">
        <div class="textrank-choice-text">口碑榜</div>
      </li>
      <!-- <li class="textrank-choice">
        <div class="textrank-choice-more clickbtn">
          <router-link to="/rank">更多榜单>></router-link>
        </div>
      </li> -->
    </div>
    <div id="textrank-rank">
      <li class="textrank" v-for="(item,index) in videosDetail" :key="item.id">
        {{index+1}}
        <div class="textrank-rank-choice clickbtn">
          <!-- 此处的router-link是一个页面跳转专用的标签，可以根据to传入的path跳转到对应的页面 -->
          <router-link :to="{path: '/movie/' + item.id}">{{item.movie_name}}</router-link>
        </div>
      </li>
    </div>
  </div>
</template>
<script>
export default{
  name: 'TextRank',
  props: ['videosDetail'], // 此处是接受父组件传入的值，这是一个电影的数组，我们的组件就是要对这个数组的数据进行渲染
  data: () => {
    return {
      vdate: new Date()
    }
  }
}
</script>

<style>
#textrank-name{
  top: 20px;
  margin: 0px;
  padding: 20px 2px 2px 2px;
  padding-bottom: 10px;
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: flex-end;
  border-bottom: 2px solid #eaeaea;
}
.textrank-choice {
  float:left;
  height: 50%;
  width: 33%;
  display: flex;
  align-items: flex-end;
  border-width: 2px;
}
.textrank-choice-text {
  color: rgb(0,0,0);
  font-size: 16px;
}
.textrank-choice-more{
  color: rgb(34, 119, 170);
  font-size: 13px;
}
.textrank{
  list-style: decimal;
  font-size: 13px;
  margin-top: 0px;
  padding: 7px;
  border-width: 2px;
  border-bottom: 2px groove;
  display: flex;
  line-height: 25px;
  border-bottom: 2px solid #eaeaea;
}
.textrank-rank-choice{
  padding-left: 7px;
  width:95%;
  color: rgb(34, 119, 170);
  font-size: 13px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.userrecommand {
  padding-top: 10px;
  font-size: 16px;
}
.el-tag {
  margin-top:10px;
}
</style>
